.home-index {
	display: flex;
	flex-direction: column;

	.main {
		flex: 1;
		overflow-y: scroll;

		// 轮播图
		.swiper-box {
			height: 200px;
		}

		.rank {
			position: relative;
			flex: 2;
			width: 150px;
			height: 150px;
			line-height: 20px;
			opacity: 0.73;
			border-radius: 15px 15px 15px 15px;
			background: url("../../assets/images/index-card-rank.png") no-repeat left;
			background-size: 74%;
			background-color: rgba(21, 146, 204, 1);
			color: rgba(16, 16, 16, 1);
			font-size: 14px;
			text-align: center;
			font-family: Arial;

			p {
				height: 28px;
				color: #043349;
				font-size: 20px;
				text-align: left;
				font-weight: bold;
				margin-top: 15px;
				margin-left: 15px;
				font-family: PingFangSC-bold;
			}

			span {
				position: absolute;
				display: block;
				height: 112px;
				color: rgba(255, 255, 255, 1);
				font-size: 70px;
				text-align: right;
				font-family: PingFangSC-bold;
				bottom: -54px;
				right: 13px;
			}
		}
		.clockIn {
			position: relative;
			flex: 3;
			width: 212px;
			height: 150px;
			line-height: 20px;
			opacity: 0.73;
			border-radius: 15px 15px 15px 15px;
			background: url("../../assets/images/index-card-sum.png") no-repeat left;
			background-size: 40%;
			background-color: rgba(123, 203, 245, 1);
			color: rgba(16, 16, 16, 1);
			font-size: 14px;
			text-align: center;
			font-family: Arial;
			margin-left: 15px;

			p {
				height: 28px;
				color: #043349;
				font-size: 20px;
				text-align: left;
				font-weight: bold;
				margin-top: 15px;
				margin-left: 15px;
				font-family: PingFangSC-bold;
			}

			button {
				width: 80px;
				display: block;
				height: 36px;
				color: #043349;
				font-size: 16px;
				font-weight: bold;
				border-radius: 20px;
				border: 1px solid #013454;
				position: absolute;
				right: 23px;
				top: 91px;
			}
		}


		.sportData {
			flex: 1;
			width: 180px;
			height: 110px;
			border-radius: 15px;
			background: url("../../assets/images/index-card-data.png") no-repeat
				center/cover;
			p {
				height: 28px;
				color: #fff;
				font-size: 20px;
				text-align: left;
				font-weight: bold;
				margin-top: 15px;
				margin-left: 15px;
				font-family: PingFangSC-bold;
			}
		}


		.badge {
			position: relative;
			flex: 1;
			width: 185px;
			height: 110px;
			opacity: 0.58;
			border-radius: 15px;
			background: url("../../assets/images/index-card-badge.png") no-repeat left
				bottom;
			background-size: 60%;
			background-color: #9dbde3;
			margin-left: 15px;

			p {
				height: 28px;
				color: #043349;
				font-size: 20px;
				text-align: left;
				font-weight: bold;
				margin-top: 15px;
				margin-left: 15px;
				font-family: PingFangSC-bold;
			}

			.count {
				position: absolute;
				display: block;
				color: rgb(3, 9, 75);
				font-size: 60px;
				font-family: PingFangSC-bold;
				bottom: 45px;
				right: 20px;
			}
		}


		.course {
			height: 110px;
			background: url("../../assets/images/course-img04.jpg") no-repeat
				top/cover;
			border-radius: 15px;
			p {
				height: 28px;
				color: #fff;
				font-size: 20px;
				text-align: left;
				font-weight: bold;
				margin-top: 15px;
				margin-left: 15px;
				font-family: PingFangSC-bold;
			}
		}


		.run {
			height: 110px;
			background: url("../../assets/images/course-img02.png") no-repeat
				bottom/cover;
			border-radius: 15px;
			p {
				height: 28px;
				color: #fff;
				font-size: 20px;
				text-align: left;
				font-weight: bold;
				margin-top: 15px;
				margin-left: 15px;
				font-family: PingFangSC-bold;
			}
		}
		
		&::-webkit-scrollbar {
			display: none;
		}
	}

}
